<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width: 500px;
				height: 500px;
				background-color: rgba(100,10,10,0.6);
				margin: 60px;
				position: relative;
			}
			
			.children{
				width: 150px;
				height: 150px;
				background-color: red;
				margin: 10px;
				text-align: center;
				line-height: 150px;
				font-size: 50px;
				
				
			}
			
			#children1{
				position: relative;
				top: 50px;
				left: 100px;
				background-color: chocolate;
				z-index: 1;
			}
			
			#children11{
				position: absolute;
				top: 10px;
				left: 100px;
				background-color: #A52A2A;
				z-index: 0;
			}
		</style>
	</head>
	<body>
		<!--四种定位方式
		1、默认定位方式
		2、相对定位  相对与该元素原有的位置进行定位
		3、绝对定位
			相对于最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，则相对于浏览器窗口进行定位
			设置过绝对定位后，元素脱离文档流
		4、固定定位
		-->
		
		<div class="parent">
			<div class="children" id="children1">1</div>
			<div class="children">2</div>
		</div>
		<hr >
		<div class="parent">
			<div class="children" id="children11">11</div>
			<div class="children">22</div>
		</div>
	</body>
</html>
